/* eslint-disable no-plusplus */
import React from 'react';
import ReactEcharts from '@/components/Echarts';

const TaskBar = ({ data = [] }) => {
    /* TODO: 临时需求，简单处理 */
    // const xAxisData = data.map(({ departmentName }) =>
    //     (departmentName.length > 3 ? `${departmentName.substring(0, 4)}...` : departmentName)
    // );
    const xAxisData = data.map(({ departmentName }) => departmentName);

    const data1 = data.map(item => item.workloadDoneNum);
    const data2 = data.map(item => item.workloadExecutingNum);
    const data3 = data.map(item => item.workloadNonexecutionNum);
    const data4 = data.map(item => item.normalDoneTaskNum);
    const data5 = data.map(item => item.overdueDoneTaskNum);
    const data6 = data.map(item => item.overdueNonexecutionTaskNum);

    return (
        <ReactEcharts
            option={{
                color: ['#FFA808', '#FFC53D', '#FFD666', '#597EF7', '#85A5FF', '#ADC6FF'],
                legend: {
                    left: 0,
                    top: 10,
                    data: [
                        '已完成工作量',
                        '进行中工作量',
                        '待执行工作量',
                        '正常达成任务',
                        '逾期任务',
                        '逾期未达成任务'
                    ],
                    textStyle: {
                        color: '#999',
                        fontSize: 12
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    data: xAxisData,
                    type: 'category',
                    axisTick: { show: false },
                    splitLine: { show: false },
                    splitArea: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0.1)'
                        }
                    },
                    axisLabel: {
                        color: 'rgba(0, 0, 0, 0.45)',
                        interval: 0,
                        rotate: 50,
                        margin: 16
                    }
                },
                yAxis: {
                    axisLine: { show: false },
                    axisLabel: { show: false },
                    axisTick: { show: false },
                    splitArea: { show: false },
                    splitLine: { show: false }
                },
                series: [
                    {
                        name: '已完成工作量',
                        type: 'bar',
                        stack: 'one',
                        data: data1
                    },
                    {
                        name: '进行中工作量',
                        type: 'bar',
                        stack: 'one',
                        data: data2
                    },
                    {
                        name: '待执行工作量',
                        type: 'bar',
                        stack: 'one',
                        data: data3
                    },
                    {
                        name: '正常达成任务',
                        type: 'bar',
                        stack: 'two',
                        data: data4
                    },
                    {
                        name: '逾期任务',
                        type: 'bar',
                        stack: 'two',
                        data: data5
                    },
                    {
                        name: '逾期未达成任务',
                        type: 'bar',
                        stack: 'two',
                        data: data6
                    }
                ]
            }}
        />
    );
};

export default TaskBar;
